<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 因为这个页面我们要使用ajax登录 所以要改造一下表单 -->
    <form>
        <div>
            <label for="">用户名</label> <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="">密码</label> <input type="text" id="password" name="password">
        </div>
        <div>
            <button id="btn">提交</button>
        </div>
    </form>
    <script src="./QF.js"></script>
    <script>
        // 获取元素
        var btn = document.getElementById("btn");
        var username = document.getElementById("username")
        var password = document.getElementById("password")
        // 添加点击事件
        btn.onclick = function (e) {
            // 获取用户数据
            var usernameInputValue = username.value;
            var passwordInputValue = password.value;
            // 为了美观 我们习惯将大量的数据对象提取出来
            var obj = {
                username: usernameInputValue,
                password: passwordInputValue
            }
            // 发送请求
            QF.post("/lession01/login", obj, function (data) {
                // 登录请求回来之后 判断是否成功 
                // 如果成功 一般会跳转到其它页面 
                if (!data.error) {
                    location.href = "20_登录验证.html";
                    return;
                }
                alert(data.message)
            })

            // e.preventDefault()
            return false;
        }
    </script>
</body>

</html>